import { useState } from "react";
import "./index.less";
import { RightOutlined } from '@ant-design/icons';
import Password from "./components/Password/index"
import BandCard from "./components/BandCard/index"
import Welcome from "./components/Welcome/index"
import About from "./components/About/index"
import MemberShipAgreement from "./components/MemberShipAgreement/index"
import AccountCancelLation  from "./components/AccountCancelLation/index";
import ClearCache  from "./components/ClearCache/index";
import UploadApp  from "./components/UploadApp/index";
import QuitLogin  from "./components/QuitLogin/index";

function Setting({ setCurSubTitle, profileList }: any) {
  const [active, setActive] = useState(0);
  const itemList = [
    {
      title: '登录密码',
      name: 'password'
    },
    {
      title: '绑定银行卡',
      name: 'bandCard'
    },
    {
      title: '设置欢迎语',
      name: 'welcome'
    },
    {
      title: '清除缓存',
      name: 'clearCache'
    },
    {
      title: '关于我们',
      name: 'about'
    },
    {
      title: '会员协议',
      name: 'memberShipAgreement'
    },
    {
      title: '隐私政策',
      name: 'privacyPolicy'
    },
    {
      title: '版本更新',
      name: 'versionUpdate'
    },
    {
      title: '注销账户',
      name: 'accountCancelLation'
    },
    {
      title: '退出登录',
      name: 'logout'
    }
  ];

  const handleCurrPage = () => {
    switch (itemList[active].name) {
      case 'password':
        return <Password profileList={ profileList } />;
      case 'bandCard':
        return <BandCard />;
      case 'welcome':
        return <Welcome profileList={ profileList } />;
      case 'clearCache':
        return <ClearCache />;
      case 'about':
        return <About />;
      case 'memberShipAgreement':
        return <MemberShipAgreement />;
      case 'privacyPolicy':
        return;
      case 'versionUpdate':
        return <UploadApp />;
      case 'accountCancelLation':
        return <AccountCancelLation />;
      case 'logout':
        return <QuitLogin />;
    }
  }

  const handleChangeItem = (index: number, item: any) => {
    setActive(index);
  };

  setCurSubTitle(itemList[active].title);

  return (
    <>
      <div className="flex-base">
        <div className="setting-left">
          {
            itemList.map((item, index) => {
              return (
                <div
                  key={index}
                  className="setting-list"
                  style={{
                    backgroundColor: `${active === index ? "#F5F5F5" : "transparent"}`,
                  }}
                  onClick={() => handleChangeItem(index, item)}
                >
                  <div className="setting-item-title text-style">
                    {item.title}
                  </div>
                  <RightOutlined className="setting-item-arrow" />
                </div>
              )
            })
          }
        </div>
        <div className="setting-right">
          {handleCurrPage()}
        </div>
      </div>
    </>
  );
}

export default Setting;
